import React, { useEffect } from 'react'
import { Result, Button } from 'antd'
import { useNavigate } from 'react-router-dom'

export default function NotFound() {
  const navigate = useNavigate()

  useEffect(() => {
    const timer = setTimeout(() => {
      navigate('/', { replace: true })
    }, 2000)
    return () => clearTimeout(timer)
  }, [navigate])

  return (
    <Result
      status="404"
      title="404"
      subTitle="页面不存在，2秒后自动返回首页"
      extra={
        <Button type="primary" onClick={() => navigate('/', { replace: true })}>
          立即返回首页
        </Button>
      }
    />
  )
}